import React from 'react'
import {Row,Col, Table, Input, Popconfirm,Button,  Dropdown,Icon ,Menu, Modal} from 'antd';

import reqwest from 'reqwest';

import './LinkMana.scss';

const confirm = Modal.confirm;

class EditableTable extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      data:[],
      searchData:[],
      modelVisible:false,
      rowData:'2',
      pagination: [],
      loading: false,
      status:'create'
    };
}
  handleTableChange  (pagination, filters, sorter)  {
    console.log('1',pagination)
    const pager = this.state.pagination;
    pager.current = pagination.current;
    this.setState({
      pagination: pager,
    });
    this.fetch({
      results: pagination.pageSize,
      page: pagination.current,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters,
    });
  }
  fetch (params = {})  {
    this.setState({ loading: true });
    reqwest({
      url:'http://admin.mapboom.cn/portal/v1.0/outside_link/list',
      method: 'get',
      data: {
        per_page:10,
        // ...params,
      },
      type: 'json',
    }).then((data) => {
      const pagination = this.state.pagination ;
      pagination.total = data.total;
      pagination.pageSize = data.per_page
      
      this.setState({
        loading: false,
        data: data.data,
        searchData:data.data,
        pagination,
      });
    });
  }
  componentDidMount() {
    this.fetch()
  
  }

  update(row,status){
    this.setState({
      modelVisible:true,
      rowData:row,
      status:status?status:'create'
    })
  }
  resetTable(){
    const pager = { ...this.state.pagination };
    pager.current = 1;
    this.setState({
      pagination: pager,
    });
    this.fetch({
      current:1
    });
  }
  handleModelCancel  ()  {
    this.setState({
      modelVisible: false,
    });
  }
  deleteLink  (id)  {
    reqwest({
      url:`http://admin.mapboom.cn/portal/v1.0/outside_link?id=${id}`,
      method: 'delete',
      type: 'json',
    }).then((data) => {
      this.fetch();
    });
  }
  
  render() {
  const handleMenuClick = (record, e) => {
    if (e.key === '1') {
      this.update(record,'update');
    } else if (e.key === '2') {
      let that = this;
      confirm({
        title: `你确定要删除${record.title}吗?`,
        onOk () {
          that.deleteLink(record.id)
        },
      })
    }
  }
    const columns = [
    { title: '链接', dataIndex: 'link',width:'200' },
    { title: '权重', dataIndex: 'weight',width:'200' },
    { title: '标题', dataIndex: 'title' ,width:'200'},
    { title: 'email', dataIndex: 'email' ,width:'200'},
    { title: 'Logo', dataIndex: 'logo' ,width:'200'},
    { title: '链接状态', dataIndex: 'link_status' ,width:'200'},
    { title: '链接分组', dataIndex: 'link_group' ,width:'200'},
    { title: 'Action', dataIndex: '',width:'200' , 
     },
  ];
  return (
    <div>
      <h2 className="link-title">友链管理</h2>
      <div>
      
      
          <Table columns={columns}
            rowKey={record => record.registered}
            dataSource={this.state.data}
            pagination={this.state.pagination}
            loading={this.state.loading}
            onChange={this.handleTableChange}
          />
      </div>

    </div>
  )
  }
}

export default EditableTable
